<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>案例展示</title>
    <link rel="stylesheet" type="text/css" href="../../../../css/aui/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/html/order/get_work_frm.css" />
    <style>
        .list_item {
            border-bottom: 1px solid #ccc;
        }

        .img_wrap {
            display: flex;
            margin: 0.5rem 0 1rem 0;
        }

        .img_wrap>div {
            margin-right: 0.5rem;
            width:calc(33.33% - 0.33rem);
            height:28vw;
            overflow: hidden;
        }
        .img_wrap img{width:100%;height:100%;}

        .img_wrap>div:last-child {
            margin-right: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="list_wrap ">
            <div class="list_item aui-content-padded" v-for="o in caseList">
                <div>施工项目：{{o.service_project}}</div>
                <div>服务地点：{{o.service_address}}</div>
                <div>服务日期：{{o.service_date}}</div>
                <div class="img_wrap">
                    <div v-for="v in o.service_image_array"><img :src="v" alt=""></div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../../../../script/api.js" charset="utf-8"></script>
<script src="../../../../script/aui/aui-tab.js" charset="utf-8"></script>
<script src="../../../../script/common/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="../../../../script/common/common.js" charset="utf-8"></script>
<script src="../../../../script/common/config.js" charset="utf-8"></script>
<script src="../../../../script/common/vue.min.js" charset="utf-8"></script>
<script>
    apiready = function() {
        api.parseTapmode();
        vm.init();
    }

    var vm = new Vue({
        el: "#app",
        data: {
            userInfo: {},
            caseList: [],
            pages: 1,
            status: true
        },
        methods: {
            init() {
                this.userInfo = get_local('userInfo');
                //获取案例列表
                this.getCaseList();
                // 下拉刷新
                this.pushDown();

            },
            getCaseList() {
                var that = this;
                _ajax(Config.api.UserCaseLists, {
                    user_id: that.userInfo.user_id,
                    pages: that.pages,
                }, function(ret) {
                    if (that.pages === 1) {
                        that.caseList = ret.data;
                    } else {
                        if (ret.data.length > 0) {
                            that.caseList = that.caseList.concat(ret.data);
                        } else {
                            that.status = false;
                        }
                    }
                });
            },
            openWin(name) {
                var winInfo = {
                    personal_info: {
                        name: 'personal_info_win',
                        url: './personal_info_win.html'
                    },
                    case_show: {
                        name: 'case_show_win',
                        url: './case_show_win.html'
                    },
                    service_info: {
                        name: 'service_info_win',
                        url: './service_info_win.html'
                    }
                };
                if (name) {
                    open_w(winInfo[name].name, winInfo[name].url);
                } else {
                    $toast("正在开发中...");
                }
            },
            pushDown() {
                var that = this;
                // 上拉加载
                push_up(function() {
                    if (that.status) {
                        that.pages++;
                        that.getCaseList();
                    }
                });
                // 下拉刷新
                push_down(function() {
                    setTimeout(function() {
                        //下拉刷新恢复
                        push_down_over();
                        that.pages = 1;
                        that.status = true;
                        that.getCaseList();
                    }, 500);
                });
            }
        }
    });
</script>

</html>
